<!--
 * @Author: zjf
 * @Date: 2023-12-07 15:10:23
 * @LastEditors: JenClint
 * @LastEditTime: 2024-01-04 14:24:41
 * @Description:
-->
<template>
	<l-dialog :title="$t(formTitle)" :visible.sync="formVisible" :height="400" :width="400" @close="handleCloseForm"
		@opened="handleOpenedForm" :hasBtns="false" :showMinBtn="false" :showFullscreenBtn="false">
		<div class="l-rblock l-form-viewer" style="padding:10px 10px 50px 10px" v-if="formVisible">
			<div class="l-auto-window info">
				<div class="issue-content" v-if="issueTypeLogList && issueTypeLogList.length">
					<div class="issue-tag tags" v-for="issue in issueTypeLogList" :key="issue.id">
						<span class="problem-tag tag-item" :class="issue.issueBigType">{{issue.issueBigTypeName || '---'}}</span>
						<span class="small tag-item" :class="issue.issueBigType" v-for="small in issue.small " :key="small.issueSmallType">
							{{small.issueSmallTypeName || '---'}}
						</span>
					</div>
				</div>
				<span class="title">{{formData.suggestions || '---'}}</span>
				<div class="info-item"> <span class="label">地址：</span><span class="text">{{formData.address || '---'}}</span>
				</div>
				<div class="info-item">
					<span class="label">上报日期：</span>
					<span class="text">{{lr_dateFormat(formData.createTime) || '---'}}</span>
				</div>
				<div class="info-item"> <span class="label">补充说明：</span><span
						class="text">{{formData.description || '---'}}</span></div>
				<div class="info-item info-item-image">
					<el-image v-for="(img,idx) in imageList" :key="idx" class="image" :src="img" :preview-src-list="imageList">
					</el-image>
				</div>
			</div>
		</div>
	</l-dialog>
</template>

<script>
export default {
	components: {

	},
	props: {
		formTitle: {
			type: String,
			default: '详情'
		},
		formEdit: {
			type: Boolean,
			default: true
		},
		onlyMap: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			formEditRow: {},
			formVisible: false,
			activeName: 'tab0',
			formData: {},
			imageList: [],
			issueTypeLogList: []
		};
	},
	mounted() {
		this.init()
	},
	methods: {
		init() { },
		open(row = {}) {
			this.formEditRow = row
			if (row.issueId ) {
				this.loadFormData(row.issueId)
			} else {
				this.$message({
					type: "info",
					message: this.$t("获取详情失败!"),
				});
			}
		},

		async handleOpenedForm(showLoading, hideLoading) {
			showLoading('加载数据中...')
			this.GET_FOLDER_IMG(this.formData.photoFiles)
			hideLoading()
		},
		handleCloseForm() {
			this.formVisible = false
		},
		refresh() {
			this.$emit('refresh')
		},
		async loadFormData(id) {
			const api = window.$crud(`issue`);
			const data = await this.$awaitWraper(api.get(id));
			this.formData = data || {}
			const issueTypeLogList = data && data.issueTypeLogList || []
			let list = {}
			issueTypeLogList.forEach(t => {
				if (!list[t.issueBigType]) {
					list[t.issueBigType] = {}
					list[t.issueBigType].issueBigTypeName = t.issueBigTypeName
					list[t.issueBigType].issueBigType = t.issueBigType
					list[t.issueBigType].small = []
				}
				list[t.issueBigType].small.push({
					issueSmallType: t.issueSmallType,
					issueSmallTypeName: t.issueSmallTypeName
				})
			})

			this.issueTypeLogList = Object.keys(list).map(item => list[item])


			this.formVisible = true

		},



		/** 获取项目照片 */
		async GET_FOLDER_IMG(folderId) {
			if (folderId) {
				const api = window.$crud(`system/annexesfile/${folderId}/list`);
				const list = await this.$awaitWraper(api.getInfo());
				if (list.length) {
					this.imageList = list.map(t => `${this.apiUrl}system/annexesfile/preview/${t.f_Id}?token=${this.token}`)
				}
			}
			return []
		},

	}
};
</script>
<style lang="scss" scoped>
@import '../../style/tag.scss';

.info {
	display: flex;
	flex-direction: column;
	gap: 3px;
	height: 100%;
	overflow-y: auto;
}
.title {
	font-size: 16px;
	font-weight: 600;
	color: #000;
}
.info-item {
	display: flex;
	flex-direction: row;
	.label {
		white-space: nowrap;
	}
}
.info-item-image {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	.image {
		width: 100px;
		height: 100px;
		border-radius: 10px;
	}
}
.issue-content {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 4px;
  .issue-tag {
    margin-right: 4px;
    // display: flex;
    flex-wrap: wrap;
    gap: 6px;
    .problem-tag,
    .small {
      margin-right: 4px;
    }
  }
}
</style>